import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import './index.css'

export default function Model(props) {
  const {visible:show,children,title}=props
  const {onClose,onConfirm}=props
  const [visible,setVisible]=useState(false)
  useEffect(()=>{
    setVisible(show)
    // console.log('----------')
  },[show])
  const closeModel=()=>{
    setVisible(false)
    onClose && onClose(show)
  }
  const confirm=()=>{
    setVisible(false)
    onConfirm && onConfirm(show)
  }
  const maskClick=()=>{
    setVisible(false)
    onClose && onClose(show)
  }
  return (
    
   visible && <div className="model-wrapper">
      <div className="model">
        <div className="model-title">{title}</div>
        <div className="model-content">{children}</div>
        <div className="model-operator">
          <button className='model-operator-close' onClick={closeModel}>取消</button>
          <button className='model-operator-confirm' onClick={confirm}>确定</button>
        </div>
      </div>
      <div className="mask" onClick={maskClick}></div>
      </div> 

  )
}
